<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 源码中 single-spa 是用rollup打包的 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/single-spa/5.9.3/umd/single-spa.min.js"></script>
    <!-- 切换导航加载不同的应用 -->
    <a href="#/a">a应用</a>
    <a href="#/b">b应用</a>
    <script type="module">
      //接入协议
      // let { registerApplication, start } = singleSpa;
      import { registerApplication, start } from "./single-spa/single-spa.js";

      const customProps = { name: "hello" };

      let app1 = {
        bootstrap: [
          async (customProps) => {
            console.log("app1 启动～1", customProps);
          },
          async () => {
            console.log("app1 启动～2");
          },
        ],
        mount: async (customProps) => {
          console.log("app1 mount");
        },
        unmount: async (customProps) => {
          console.log("app1 unmount");
        },
      };
      let app2 = {
        bootstrap: [
          async () => {
            console.log("app2 启动～1");
          },
          async () => {
            console.log("app2 启动～2");
          },
        ],
        mount: async () => {
          console.log("app2 mount");
        },
        unmount: async () => {
          console.log("app2 unmount");
        },
      };

      // 注册微应用
      registerApplication(
        "app1", // 这个名字用于过滤防止加载重复的应用
        async () => app1,
        (location) => location.hash === "#/a", //路径匹配到后台会加载应用
        customProps //自定义属性
      );
      registerApplication(
        "app2", // 这个名字用于过滤防止加载重复的应用
        async () => app2,
        (location) => location.hash === "#/b", //路径匹配到后台会加载应用
        customProps //自定义属性
      );
      setTimeout(() => {
        start();
      }, 1000);

      // 优先处理single-spa中应用的路由，最后可以在tryBootstrapAndMount(卸载完成后，挂载之前)去处理这部分路由
      window.addEventListener("hashchange", function () {
        console.log("my-hashchange");
      });
    </script>
  </body>
</html>
